<template>
  <div>
    <!-- 签到日期开始 -->
    <div class="dataBox">
      <p class="lianXu">连续签到7天,免费领一份包邮礼包</p>
      <ul class="tianBox">
        <!-- {{ tianList }} -->
        <li class="tobe" v-for="(item, index) in tianList" :key="index">
          <i class="daiYuan">{{ item.qianOne }}</i>
          <p class="tianTo">{{ item.qianToo }}</p>
        </li>
      </ul>
      <button class="qianDao">签到</button>
     <div class="qinaTu">
        <img :src="qinaUrl" alt="" >
      </div>
    </div>
     
    <!-- 签到日期结束 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      tianList: [
        {
          //   imgUrl: "../../../../static/images/wallet&signin/wallet15.png",
          qianOne: "待签",
          qianToo: "第1天",
        },
        {
          //   imgUrl: "../../../../static/images/wallet&signin/wallet15.png",
          qianOne: "待签",
          qianToo: "第2天",
        },
        {
          //   imgUrl: "../../../../static/images/wallet&signin/wallet15.png",
          qianOne: "待签",
          qianToo: "第3天",
        },
        {
          //   imgUrl: "../../../../static/images/wallet&signin/wallet15.png",
          qianOne: "待签",
          qianToo: "第4天",
        },
        {
          //   imgUrl: "../../../../static/images/wallet&signin/wallet15.png",
          qianOne: "待签",
          qianToo: "第5天",
        },
        {
          //   imgUrl: "../../../../static/images/wallet&signin/wallet15.png",
          qianOne: "待签",
          qianToo: "第6天",
        },
        {
          //   imgUrl: "../../../../static/images/wallet&signin/wallet15.png",
          qianOne: "待签",
          qianToo: "第7天",
        },
      ],
      qinaUrl: "../../../../static/images/wallet&signin/wallet07.png",
    };
  },
};
</script>

<style lang="less" scoped>
.dataBox {
  margin: 10px auto;
  width: 90%;
//   border: 2px solid blue;
  background-color: #fff;
  border-radius: 25px 25px 0px 0px;
  p {
    font-size: 32px;

    // border: 1px solid red;
  }
  .lianXu {
    height: 90px;
    line-height: 90px;
    text-align: left;
    padding-left: 20px;
    color: rgb(170, 25, 206);
  }
  .tianBox {
    display: flex;
    // border: 1px solid green;
    .tobe {
      width: 100px;
      height: 200px;
    //   border: 1px solid palegreen;
      .daiYuan {
        margin-top: 20px;
        display: inline-block;
        width: 80px;
        height: 80px;
        font-size: 28px;
        line-height: 75px;
        color: #fff;
        // border: 1px solid slateblue;
        border-radius: 40px;
        background-image: url(../../../../../static/images/wallet&signin/wallet15.png);
        background-size: 80px;
      }
      .tianTo {
        margin-top: 10px;
        font-size: 28px;
      }
    }
  }
  .qianDao {
    width: 5.2rem;
    height: 0.8rem;
    margin-top: 20px;
    font-size: 0.4rem;
    // border: 1px solid green;
    border-radius: 30px;
    color: #fff;
    background-color: slateblue;
  }
  .qinaTu {
    //   width: 90%;
    margin-top: 40px;
    // height: 120px;
    // border: 1px solid red;
    img {
      width: 99%;
      height: 99%;
    }
  }
}
</style>